<template>
  <div>
    <img v-if="pageLoader" src="../../assets/shop-loader.svg" alt="" class="page-loader">
    <div v-if="!pageLoader">
      <div id="store-header">
        <goga-header :title="shopInfo.wName" orange>
          <div slot="left" @click="goBack">
            <icon symbol="back"></icon>
          </div>
        </goga-header>
        <div class="shop-header">
          <div class="p-pic">
            <img class="mini-cover" :src="shopInfo.wPic" width="100%" height="100%">
          </div>
          <div class="p-info">
            <div class="p-title">
              <span v-if="shopInfo.wType===1">加盟</span>
              <h2>{{shopInfo.wName}}</h2>
            </div>
            <ul>
              <li>营业时间：09:00~21:30</li>
              <li>店铺店址：{{shopInfo.wAddress}}</li>
              <li>联系电话：<a :href="'tel:'+shopInfo.wPhone ">{{shopInfo.wPhone}}</a></li>
            </ul>
          </div>
        </div>
        <div class="shop-tab-container">
          <div class="shop-tab" :class="{active: tab=='menu'}" @click="tab='menu'">
            商品
          </div>
          <div class="shop-tab" :class="{active: tab=='comment'}" @click="tab='comment'">
            评价
          </div>
        </div>
      </div>
      <div class="shop-main">
        <div class="menuview" v-show="tab==='menu'">
          <goods-view></goods-view>
        </div>
        <div class="menuview" v-show="tab==='comment'">
          <goods-eval></goods-eval>
        </div>
      </div>
      <cart :shop="shopId"></cart>
      <spec-modal></spec-modal>
    </div>
  </div>
</template>

<script lang="babel">
  import GogaHeader from "@components/goga-header.vue"
  import Icon from '@components/icon'
  import GoodsView from './goodsView.vue'
  import specModal from './specModal.vue'
  import Cart from '../Cart'
  import GoodsEval from './goodsEval.vue'
  import {mapGetters} from 'vuex'

  const fetchShopData = async(store, shopId) => {
    return await store.dispatch('backend/shop/getShopInfo', {shopId})
  }
  const fetchShopList = async(store, shopId) => {
    return await store.dispatch('backend/shop/getShopList', {shopId})
  }
  const fetchEvalList = async(store, {shopId, page}) => {
    return await store.dispatch('backend/shop/getEval', {id: shopId, page})
  }
  const initCart = async(store, shopId) => {
    return await store.dispatch('frontend/cart/initCart', shopId)
  }
  export default {
    components: {
      GogaHeader,
      Icon,
      GoodsView,
      Cart,
      specModal,
      GoodsEval
    },
    data: function () {
      return {
        mainHeight: 0,
        tab: "menu",
        shopId: '',
        pageLoader: true
      }
    },
    computed: {
      ...mapGetters({
        shopInfo: 'backend/shop/getShopInfo',
        shopList: 'backend/shop/getShopList'
      })
    },
    async mounted() {
      let shopId = this.shopId = this.$route.params.shopId;
      await initCart(this.$store, shopId);
      await fetchShopData(this.$store, shopId);
      await fetchShopList(this.$store, shopId);
      await fetchEvalList(this.$store, {shopId, page: 1})
      this.pageLoader = false;
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      }
    }
  }

</script>
<style lang="less" rel="stylesheet/less">
  @import "index.less";
  .shop-main{
    position: absolute;
    top: 437/75rem;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
